@charset "utf-8";


#web{
    height: 100%;
    overflow: hidden;
    #t_five{
        width: 100%;
        position: relative;
        transform:translateX(-100%);
        animation: t_five 0.3s linear 1 forwards ;
        .five-a{
            width: 100%;
            img{
                width: 100%;
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                margin: auto;
                z-index: 100;
                transform: rotate(0deg) scale(3);
                animation: five-a 4s linear 0.4s infinite;
            }
        }
        .five-b{
            width: 100%;
            img{
                width: 100%;
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                margin: auto;
                z-index: 101;
                opacity: 0;
                transform: scale(0);
                animation: five-b 0.8s linear 1 forwards 0.5s;
            }
        }
        .five-c{
            width: 100%;
            img{
                width: 62%;
                position: absolute;
                top: 0px;
                left: 0;
                right: 0;
                margin: auto;
                margin-top: 28%;
                z-index: 102;
                opacity: 0;
                transform: scale(0);
                animation: five-c 0.5s linear 1 forwards 1.1s;
            }
        }
        .five-d{
            width: 100%;
            img{
                width: 100%;
                position: absolute;
                top: 0px;
                left: 0;
                right: 0;
                margin: auto;
                margin-top: 82%;
                z-index: 101;
                opacity: 0;
                animation: five-d 0.3s linear 1 forwards 0.8s;
            }
        }
        .five-e{
            width: 100%;
            img{
                width: 57%;
                position: absolute;
                top: 0px;
                left: -39%;
                right: 0;
                margin: auto;
                margin-top: 49%;
                z-index: 100;
                transform: rotate(-60deg);
                opacity: 0;
                animation: five-e 0.6s linear 1 forwards 1.2s;
            }
        }
        .five-f{
            width: 100%;
            img{
                width: 57%;
                position: absolute;
                top: 0;
                left: 43%;
                right: 0;
                margin: auto;
                margin-top: 49%;
                z-index: 100;
                opacity: 0;
                transform: rotate(60deg);
                animation: five-f 0.6s linear 1 forwards 1.2s;
            }
        }
        .five-g{
            width: 100%;
            img{
                width: 32%;
                position: absolute;
                top: 0;
                left: -57%;
                right: 0;
                margin: auto;
                margin-top: 27%;
                z-index: 101;
                opacity: 0;
                animation: five-g 0.3s linear 1 forwards 1.5s;
            }
        }
        .five-h{
            width: 100%;
            img{
                width: 32%;
                position: absolute;
                top: 0;
                left: 59%;
                right: 0;
                margin: auto;
                margin-top: 25%;
                z-index: 101;
                opacity: 0;
                animation: five-h 0.3s linear 1 forwards 1.6s;
            }
        }
    }
}


// 动画
@keyframes t_five{
    from{
        transform:translateX(-100%);
    }
    to{
        transform:translateX(0%);
    }
}
@keyframes five-a{
    from{
        transform: rotate(0deg) scale(3);
    }
    to{
        transform: rotate(360deg) scale(3);
    }
}
@keyframes five-b{
    0%{
        opacity: 0;
        transform: scale(0);
    }
    25%{
        opacity: 1;
        transform: scale(1.1);
    }
    50%{
        opacity: 1;
        transform: scale(0.9);
    }
    75%{
        opacity: 1;
        transform: scale(1.05);
    }
    100%{
        opacity:1;
        transform: scale(1);
    }
}
@keyframes five-c{
    0%{
        opacity: 0;
        transform: scale(0);
    }
    25%{
        opacity: 1;
        transform: scale(1.1);
    }
    50%{
        opacity: 1;
        transform: scale(0.9);
    }
    75%{
        opacity: 1;
        transform: scale(1.05);
    }
    100%{
        opacity:1;
        transform: scale(1);
    }
}
@keyframes five-d{
    from{
        opacity: 0;
        margin-top: 0%;
    }
    to{
        opacity: 1;
        margin-top: 82%;
    }
}
@keyframes five-e{
    0%{
        opacity: 0;
        transform: rotate(-60deg);
    }
    25%{
        opacity: 1;
        transform: rotate(10deg);
    }
    50%{
        opacity: 1;
        transform: rotate(-5deg);
    }
    75%{
        opacity: 1;
        transform: rotate(5deg);
    }
    100%{
        opacity:1;
        transform: rotate(0deg);
    }
}
@keyframes five-f{
    0%{
        opacity: 0;
        transform: rotate(60deg);
    }
    25%{
        opacity: 1;
        transform: rotate(-10deg);
    }
    50%{
        opacity: 1;
        transform: rotate(5deg);
    }
    75%{
        opacity: 1;
        transform: rotate(-5deg);
    }
    100%{
        opacity:1;
        transform: rotate(0deg);
    }
}
@keyframes five-g{
    from{
        opacity: 0;
        margin-top: 60%;
    }
    to{
        opacity: 1;
        margin-top: 25%;
    }
}
@keyframes five-h{
    from{
        opacity: 0;
        margin-top: 60%;
    }
    to{
        opacity: 1;
        margin-top: 25%;
    }
}